<template>
  <div class="tab-content">
    <ModuleSection title="物资管理" icon="fas fa-box">
      <ModuleMenu :items="materialMenuItems" />
    </ModuleSection>
    
    <ModuleSection title="我的物资申领" icon="fas fa-clipboard-list">
      <ListItem 
        v-for="item in materialList" 
        :key="item.id"
        :title="item.title"
        :description="item.description"
        :icon="item.icon"
        :bgColor="item.bgColor"
      />
    </ModuleSection>
  </div>
</template>

<script>
import ModuleSection from '../common/ModuleSection.vue'
import ModuleMenu from '../common/ModuleMenu.vue'
import ListItem from '../common/ListItem.vue'

export default {
  name: 'MaterialModule',
  components: {
    ModuleSection,
    ModuleMenu,
    ListItem
  },
  data() {
    return {
      materialMenuItems: [
        { id: 1, name: '物资列表', icon: 'fas fa-boxes', bgColor: 'bg-blue', path: '/material/list' },
        { id: 2, name: '物资申领', icon: 'fas fa-clipboard-list', bgColor: 'bg-green', path: '/material/apply' },
        { id: 3, name: '物资入库', icon: 'fas fa-sign-in-alt', bgColor: 'bg-orange', path: '/material/inbound' },
        { id: 4, name: '物资出库', icon: 'fas fa-sign-out-alt', bgColor: 'bg-purple', path: '/material/outbound' },
        { id: 5, name: '物资调拨', icon: 'fas fa-exchange-alt', bgColor: 'bg-cyan', path: '/material/transfer' },
        { id: 6, name: '盘点管理', icon: 'fas fa-tasks', bgColor: 'bg-yellow', path: '/material/inventory' }
      ],
      materialList: [
        { 
          id: 1, 
          title: '办公用品申领', 
          description: '申请日期: 2024-05-11, 状态: 审批中',
          icon: 'fas fa-clipboard-list',
          bgColor: 'bg-blue'
        },
        { 
          id: 2, 
          title: '医疗耗材申领', 
          description: '申请日期: 2024-05-01, 状态: 已发放',
          icon: 'fas fa-clipboard-list',
          bgColor: 'bg-green'
        },
        { 
          id: 3, 
          title: '检验试剂申领', 
          description: '申请日期: 2024-04-23, 状态: 已发放',
          icon: 'fas fa-clipboard-list',
          bgColor: 'bg-orange'
        }
      ]
    }
  }
}
</script>

<style scoped>
.tab-content {
  padding: 16px;
}
</style> 